@import "bourbon/bourbon";

@mixin background-retina($src) {
  background-image: url($src);
  background-image: linear-gradient(transparent, transparent), url($src);
}

fieldset.fields1 div {
}
.passwordPickerIcon{
  .fa-key{
    @include transform(rotate(135deg));
    cursor: pointer;
  }
}
body{
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
}
small {
    color: #797979;
}
#password_picker {
  width: 330px;
  border: 2px solid #000;
  max-height: 375px;
  overflow: hidden;
  z-index: 9999999;
  box-sizing: content-box;
  font-family: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
  .tabs {
    position: static;
    height: 37px;
    background-color: #0082c9;
    margin-bottom: 0;
    float: left;
    width: 100%;
    .tab {
      float: left;
      margin-bottom: 0;
      padding: 10px 10px;
      color: #004378;
      cursor: pointer;
      .fa {
        font-size: 16px;
        box-sizing: content-box;
        margin: 0;
        padding: 0;
      }
      &.add {

      }
      &.list {

      }
      &.generate {

      }
      &.active {
        color: #0082c9;
        background: #fff;
      }
      &.active:hover {
        color: #0082C9;
      }
      &:hover {
        color: #e1e1e1;
      }
      &.close {
        float: right;
        margin-top: -6px;
        padding: 11px 10px;
        border-left: 1px solid #1572b9;
      }
    }

  }
  div {
    box-sizing: content-box;
  }
  .input{
    float: left;
    background: #fff;
    color: #555;
    cursor: text;
    font-family: inherit;
    border: 1px solid #ddd;
    outline: none;
    height: 21px;
    border-radius: 3px;
    margin: 3px 3px 3px 0;
    padding: 5px 6px 5px;
    font-size: 13px;
    box-sizing: content-box;
    background-clip: padding-box;
  }
  input[type="password"], input[type="text"]:not(#savepw-password) {
    width: calc(100% - 24px) !important;

  }
  input[type="password"],#savepw-password {
    width: calc(100% - 75px) !important;
    $border: 0px;
    @include border-top-radius($border);
    @include border-right-radius($border);
    @include border-bottom-radius($border);
    @include border-left-radius($border);
  }

  .niceInputButtons {
    float: left;
    margin-top: 3px;
    margin-left: -3px;
    .cell {
      margin-left: -5px;
      display: inline-block;
      font-size: 14px;
      border: 1px solid #ddd;
      background-color: #eaeaea;
      cursor: pointer;
      height: 24px;
      padding: 7px 8px 0;
    }
    .cell:last-child {
      $border-radius: 3px;
      -webkit-border-bottom-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      -webkit-border-top-right-radius: $border-radius;
      border-top-right-radius: $border-radius;
      background-clip: padding-box;
    }
  }
  .rrow {
    float: left;
    width: 100%;
    margin-bottom: 5px;
  }
  .tab-content {
    display: block;
    box-sizing: content-box;
    background: #fff;
    padding: 5px;
    margin: 0;
    width: calc(100% - 11px);
    overflow: auto;
    font-size: 13px;
    max-height: 330px;
    .pull-left {
      float: left;
    }
    h2 {
      font-size: 16px;
      margin: 0 0 15px 0px;
    }
    .tab-add-content {
      label {
        display: block;
        margin-bottom: 5px;

      }

    }
    .tab-list-content,#searchResults {
      width: 100%;
      font-size: 15px;
      .account {
        position: relative;
        min-height: 40px;
        padding: 6px 7px;
        border-bottom: 1px solid #e1e8ed;
        cursor: pointer;
      }
      .no-credentials {
        width: 100%;
        padding-top: 10px;
        display: inline-block;
        div {
          float: left;
          margin-bottom: 10px;
        }
      }
    }
    .tab-generate-content {
      .pw-gen {
        input {
          width: calc(100% - 75px) !important;
          float: left;
          background: #fff;
          color: #555;
          cursor: text;
          font-family: inherit;
          border: 1px solid #ddd;
          outline: none;
          height: 19px;
          min-height: 16px;
          border-radius: 3px;
          margin: 3px 3px 3px 0;
          padding: 7px 6px 5px;
          font-size: 13px;
          box-sizing: content-box;
          -webkit-border-bottom-right-radius: 0;
          border-bottom-right-radius: 0;
          -webkit-border-top-right-radius: 0;
          border-top-right-radius: 0;
          background-clip: padding-box;
        }

      }
      .password_settings {
        .adv_opt {
          cursor: pointer;
        }
        clear: both;
        .pw-setting-advanced {
          width: 100%;
          label {
            display: block;
            margin-right: 10px;
            margin-bottom: 5px;
            .label {
              color: #000;
              padding: 3px 4px;
              font-size: 12px;
              font-weight: normal;
              margin-top: 1px;
              float: right;
              box-shadow: none;
            }
          }
          .pw-len, .digits {
            float: left;
            margin-bottom: 10px;
            .label {
              margin-bottom: 5px;
              float: left;
            }

          }
        }
      }
    }
    .clearfix {
      clear: both;
    }
  }

  .btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1rem;
    cursor: pointer;
    border-radius: .25rem;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }
  .btn-secondary {
    color: #292b2c;
    background-color: #fff;
    border-color: #ccc;
  }
  .btn-secondary:hover {
    color: #292b2c;
    background-color: #e6e6e6;
    border-color: #adadad;
  }
  .btn:first-child {
    margin-right: 25px;
  }

  .btn:hover {
    background: #3cb0fd;
    text-decoration: none;
  }

  .btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
  }
}
